<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <title>企业官网</title>
    <link href="https://g.alicdn.com/code/lib/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous" />
    <style>
        /* Global Styles */
        body {
            font-family: 'Arial', sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        /* Header */
        .header {
            background: #fff;
            padding: 20px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .logo {
            float: left;
        }

        .navigation {
            float: right;
        }

        .navigation ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .navigation ul li {
            display: inline;
            margin-left: 10px;
        }

        .navigation ul li a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }

        /* Hero Section */
        .hero {
            background: url('https://help-static-aliyun-doc.aliyuncs.com/demos/web-demo-img-1.jpg') no-repeat center center/cover;
            color: #fff;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 10px;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        .hero a {
            color: #fff;
        }

        .btn-primary {
            background-color: #0066cc;
            color: #fff;
            padding: 10px 20px;
            text-decoration: none;
        }

        /* Features Section */
        .features {
            padding: 50px 0;
            text-align: center;
        }

        .feature-cards {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .feature-cards .card {
            width: 30%;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .feature-cards .card img {
            max-width: 100%;
        }

        .feature-cards .card h3 {
            margin-top: 10px;
        }

        /* About Section */
        .about {
            background: #f3f3f3;
            padding: 50px 0;
            text-align: center;
        }

        /* Services Section */
        .services {
            padding: 50px 0;
            text-align: center;
        }

        .service-cards {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .service-cards .card {
            width: 30%;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .service-cards .card img {
            max-width: 100%;
        }

        .service-cards .card h3 {
            margin-top: 10px;
        }

        /* Blog Section */
        .blog {
            background: #fff;
            padding: 50px 0;
            text-align: center;
        }

        /* Contact Section */
        .contact {
            background: #f3f3f3;
            padding: 50px 0;
            text-align: center;
        }

        .contact button {
            padding: 5px 20px;
        }

        .post {
            margin-bottom: 15px;
            text-align: left;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Footer */
        .footer {
            background: #202020;
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }

        .footer-content {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footer-content svg {
            max-width: 100px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<script>
    // 用于收集未捕获的异常等错误信息，以便持续迭代改进解决方案示例。
    // 正式用于业务时，可移除这里的代码，或者替换为你自己的 ARMS 前端监控。
    window.__bl = {
        config: {
            pid:"fq234nz6x8@4dd5b32f90fa4b1",
            appType:"web",
            imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",
            behavior:false,
            disableHook: true,
            page: "高效构建企业门户网站"
        }
    }
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v1/bl.js" crossorigin="anonymous"></script>
<!-- Header Section -->
<header class="header">
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4608 1024" height="23" data-spm-anchor-id="5176.28508143.J_4VYgf18xNlTAyFFbOuOQe.i0.e939154a63Ur8Z"><path d="M3266.56 773.12h327.68v-102.4h-327.68v-102.4H3584V35.84H2846.72v532.48h317.44v102.4h-327.68v102.4h327.68v112.64h-353.28v102.4h814.08v-102.4h-353.28v-112.64zM3276.8 138.24h215.04v112.64H3276.8V138.24z m0 215.04h215.04V460.8H3276.8V353.28zM3174.4 460.8h-215.04V353.28H3174.4V460.8z m0-209.92h-215.04V138.24H3174.4v112.64zM537.6 445.44H1075.2v122.88H537.6z"></path><path d="M1341.44 5.12h-353.28L1075.2 128l256 81.92c46.08 15.36 76.8 61.44 76.8 107.52v389.12c0 46.08-30.72 92.16-76.8 107.52l-256 81.92-87.04 122.88h353.28c148.48 0 266.24-117.76 266.24-266.24V276.48c0-148.48-117.76-271.36-266.24-271.36zM276.48 814.08c-46.08-15.36-76.8-61.44-76.8-107.52V317.44c0-46.08 30.72-92.16 76.8-107.52l256-81.92L619.52 5.12H266.24C117.76 5.12 0 128 0 276.48v471.04c0 148.48 117.76 266.24 266.24 266.24h353.28l-87.04-122.88-256-76.8zM2493.44 250.88h-261.12v537.6h261.12V250.88z m-107.52 430.08h-56.32V353.28h56.32v327.68zM1848.32 988.16h102.4V138.24h107.52L1996.8 419.84v102.4h61.44v225.28c0 15.36-10.24 25.6-25.6 25.6h-25.6v102.4h51.2c56.32 0 102.4-46.08 102.4-102.4v-358.4H2099.2l61.44-281.6v-102.4h-312.32v957.44z"></path><path d="M2206.72 138.24H2560v660.48c0 46.08-35.84 87.04-87.04 87.04h-76.8v102.4h107.52c87.04 0 163.84-71.68 163.84-163.84V138.24h35.84v-102.4h-496.64v102.4zM3763.2 40.96h737.28v102.4H3763.2zM4541.44 527.36v-102.4H3727.36v102.4h204.8l-163.84 358.4v102.4h691.2c30.72 0 51.2-25.6 51.2-51.2 0-10.24 0-15.36-5.12-20.48l-87.04-194.56h-112.64l76.8 163.84h-496.64l163.84-358.4h491.52z"></path></svg>
        <nav class="navigation">
            <ul>
                <li><a href="#features">产品</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#blog">博客</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <h1>您企业的宣传语</h1>
        <p>提供专业的企业服务</p>
        <button class="btn-primary"><a href="#learn-more">了解更多</a></button>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="features">
    <div class="container">
        <h2>产品能力</h2>
        <div class="feature-cards">
            <div class="card">
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01PvQQSu1h7qix0NQDq_!!6000000004231-0-tps-2469-1137.jpg" alt="Feature 1" />
                <h3>能力 一</h3>
                <p>能力一的描述。</p>
            </div>
            <div class="card">
                <img src="https://img.alicdn.com/imgextra/i1/O1CN0135SzFw20rAcD3ygL3_!!6000000006902-0-tps-2469-1137.jpg" alt="Feature 2" />
                <h3>能力 二</h3>
                <p>能力二的描述。</p>
            </div>
            <div class="card">
                <img src="https://img.alicdn.com/imgextra/i1/O1CN01nKdEgD1UJfwelWKxf_!!6000000002497-0-tps-2469-1137.jpg" alt="Feature 3" />
                <h3>能力 三</h3>
                <p>能力三的描述。</p>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="about">
    <div class="container">
        <h2>关于我们</h2>
        <p>我们是一家致力于为企业和个人提供全方位科技解决方案的服务网站。我们的使命是通过创新和专业的技术支持，助力客户在数字时代取得成功。我们提供多样化的服务，包括但不限于IT咨询、软件开发、网络安全、云计算以及数据分析。</p>

        <p>选择我们，您将获得一站式的科技服务体验，让技术更简单，让未来更智能。加入我们，共同迎接数字化转型的无限可能。</p>
    </div>
</section>

<!-- Services Section -->
<section id="services" class="services">
    <div class="container">
        <h2>我们的服务</h2>
        <div class="service-cards">
            <div class="card">
                <img src="https://img.alicdn.com/imgextra/i2/O1CN01PvQQSu1h7qix0NQDq_!!6000000004231-0-tps-2469-1137.jpg" alt="Feature 1" />
                <h3>服务 一</h3>
                <p>服务一的介绍。</p>
            </div>
            <div class="card">
                <img src="https://img.alicdn.com/imgextra/i1/O1CN0135SzFw20rAcD3ygL3_!!6000000006902-0-tps-2469-1137.jpg" alt="Feature 2" />
                <h3>服务 二</h3>
                <p>服务二的介绍。</p>
            </div>
            <div class="card">
                <img src="https://img.alicdn.com/imgextra/i1/O1CN01nKdEgD1UJfwelWKxf_!!6000000002497-0-tps-2469-1137.jpg" alt="Feature 3" />
                <h3>服务 三</h3>
                <p>服务三的介绍。</p>
            </div>
        </div>
    </div>
</section>

<!-- Blog Section -->
<section id="blog" class="blog">
    <div class="container">
        <h2>最新内容</h2>
        <div class="blog-posts">
            <!-- Blog Posts will be here -->
            <div class="post">
                <h3>数字化转型：为什么每个企业都需要它？</h3>
                <p>内容描述</p>
            </div>
            <div class="post">
                <h3>人工智能在企业中的5大应用场景</h3>
                <p>内容描述</p>
            </div>
            <div class="post">
                <h3>如何选择适合您的服务？</h3>
                <p>内容描述</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="contact">
    <div class="container">
        <h2>联系我们</h2>
        <form>
            <input type="text" placeholder="姓名" />
            <input type="email" placeholder="邮件" />
            <button type="submit" class="btn-primary">提交</button>
        </form>
    </div>
</section>

<!-- Footer Section -->
<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4608 1024" height="23" data-spm-anchor-id="5176.28508143.J_4VYgf18xNlTAyFFbOuOQe.i0.e939154a63Ur8Z">
                <path fill="#fff" d="M3266.56 773.12h327.68v-102.4h-327.68v-102.4H3584V35.84H2846.72v532.48h317.44v102.4h-327.68v102.4h327.68v112.64h-353.28v102.4h814.08v-102.4h-353.28v-112.64zM3276.8 138.24h215.04v112.64H3276.8V138.24z m0 215.04h215.04V460.8H3276.8V353.28zM3174.4 460.8h-215.04V353.28H3174.4V460.8z m0-209.92h-215.04V138.24H3174.4v112.64zM537.6 445.44H1075.2v122.88H537.6z"></path>
                <path fill="#fff" d="M1341.44 5.12h-353.28L1075.2 128l256 81.92c46.08 15.36 76.8 61.44 76.8 107.52v389.12c0 46.08-30.72 92.16-76.8 107.52l-256 81.92-87.04 122.88h353.28c148.48 0 266.24-117.76 266.24-266.24V276.48c0-148.48-117.76-271.36-266.24-271.36zM276.48 814.08c-46.08-15.36-76.8-61.44-76.8-107.52V317.44c0-46.08 30.72-92.16 76.8-107.52l256-81.92L619.52 5.12H266.24C117.76 5.12 0 128 0 276.48v471.04c0 148.48 117.76 266.24 266.24 266.24h353.28l-87.04-122.88-256-76.8zM2493.44 250.88h-261.12v537.6h261.12V250.88z m-107.52 430.08h-56.32V353.28h56.32v327.68zM1848.32 988.16h102.4V138.24h107.52L1996.8 419.84v102.4h61.44v225.28c0 15.36-10.24 25.6-25.6 25.6h-25.6v102.4h51.2c56.32 0 102.4-46.08 102.4-102.4v-358.4H2099.2l61.44-281.6v-102.4h-312.32v957.44z"></path>
                <path fill="#fff" d="M2206.72 138.24H2560v660.48c0 46.08-35.84 87.04-87.04 87.04h-76.8v102.4h107.52c87.04 0 163.84-71.68 163.84-163.84V138.24h35.84v-102.4h-496.64v102.4zM3763.2 40.96h737.28v102.4H3763.2zM4541.44 527.36v-102.4H3727.36v102.4h204.8l-163.84 358.4v102.4h691.2c30.72 0 51.2-25.6 51.2-51.2 0-10.24 0-15.36-5.12-20.48l-87.04-194.56h-112.64l76.8 163.84h-496.64l163.84-358.4h491.52z"></path></svg>
            <p>版权信息 &copy; 2024 阿里云</p>
        </div>
    </div>
</footer>
<script src="index.js"></script>
</body>
</html>
